<template>
  <view>
    <u-navbar title="人员统计" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
      title-size="37" />

    <view class="sticky z-4" id="container" :style="{ top: `${top}px` }">
      <u-tabs :bold="false" :current="tabsCurrent" :is-scroll="false" :list="list" active-color="#2D8CF0" bar-height="10"
        :bar-width="barWidth" duration="0" @change="change"></u-tabs>
      <u-line color="#CCCCCC" length="94%" margin="-5rpx 0 0 20rpx" />
    </view>

    <view v-if="tabsCurrent === 0">
      <OrderDimension ref="orderDimension"/>

    </view>
    <view v-else>
      <DeviceDimension ref="deviceDimension"/>
    </view>

  </view>
</template>

<script>

import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import DeviceDimension from "./components/staff/deviceDimension";
import OrderDimension from "./components/staff/orderDimension";

import getNavBarHeight from "@/mixins/getNavBarHeight";

export default {
  name: "StaffStatistics",
  components: { EmptyIcon, DeviceDimension, OrderDimension },
  mixins: [getNavBarHeight],

  data () {
    return {
      barWidth: 350,
      tabsCurrent: 0,
      list: [{ name: "工单维度" }, { name: "设备维度" }],
    }
  },
  methods: {
    //切换tab
    change (index) {
      this.tabsCurrent = index;
    },
  },
  onReachBottom () {
    if(this.tabsCurrent === 0){
      this.$refs.orderDimension.reachBottom()
    }else{
      this.$refs.deviceDimension.reachBottom()
    }
  }
}
</script>

<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>
/deep/.u-tab-bar {
  bottom: -10rpx !important;
  z-index: 9;
}
</style>
